<template>
    <h1 ref="myh1">我是 APP 组件</h1>
    <child1 />
</template>

<script>
/**
 *  生命周期
 *      组件从创建到挂载, 到数据更新, 一直到最后的销毁的一个完整过程
 *
 *      生命周期一个分为 四个大阶段, 分别:
 *          创建阶段:
 *              创建前
 *              创建后
 *          挂载阶段:
 *              挂载前
 *              挂载后
 *          更新阶段:
 *              数据更新前
 *              数据更新后
 *          卸载阶段:
 *              卸载前
 *              卸载后
 *
 *      上述的所有生命周期 其实都是一个指定的函数
 */
import child1 from "./components/child1.vue";
export default {
    data() {
        return {
            msg: "数据",
        };
    },
    methods: {
        getMsg() {
            console.log(this.msg);
        },
    },
    components: {
        child1,
    },

    // 第一个阶段 创建阶段
    beforeCreate() {
        console.log("1. 当前组件创建前 执行", this.msg, this.$refs.myh1);
    },
    created() {
        console.log("2. 当前组件创建后 执行", this.msg, this.$refs.myh1);
    },

    // 第二个阶段 挂载阶段
    beforeMount() {
        console.log(
            "3. 当前组件挂载前执行, 此时的状态与创建后没有什么区别",
            this.msg,
            this.$refs.myh1
        );
    },
    mounted() {
        console.log(
            "4. 当前组件挂载后执行, 此时页面的所有内容已经全部加载完毕了, 一般会利用这个生命周期发送请求",
            this.msg,
            this.$refs.myh1
        );
    },
};
</script>

<style></style>
